<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/datepicker.css">
  <style>
    .p20{
      padding:20px;
    }
    .mt20{
      margin-top:20px;
    }
    .mt40{
      margin-top:40px;
    }
    .mt10{
      margin-top:10px;
    }
    .hide{
      display: none;
    }
    body{
      height:1000px;
    }
    .c999{
      color:#999;
      font-size:12px;
    }

  </style>
</head>
<body >
<div class="p20">
  <div class="mt40">
    <div>（❤️新增）时分秒单个选择，最小值：04:23:11 <span class="c999">(HH:mm:ss 单个)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-time mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="选择时间" class=" c-datepicker-data-input only-time"
             value="">
    </div>
  </div>
  <div class="mt40">
    <div>（❤️新增）时分秒范围选择，最小值：04:23:11 ，最大值：20:59:59 <span class="c999">(HH:mm:ss 范围)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-time-range mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始时间" name="" class="c-datepicker-data-input only-time" value="">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束时间" name="" class="c-datepicker-data-input only-time" value="">
    </div>
  </div>
  <div class="mt40">
    <div>（❤️新增）英文版。年月日时分秒单个选择，最小值：2018-01-01 04:00:00 ，最大值：2019-04-29 20:59:59 <span class="c999">(YYYY-MM-DD HH:mm:ss 单个)</span>
    </div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-en mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="choose date" class=" c-datepicker-data-input">
    </div>
  </div>
  <div class="mt40">
    <div>年月日单个选择，无最大最小值 <span class="c999">(YYYY-MM-DD 单个)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
    </div>
  </div>
  <div class="mt40">
    <div>年月日范围选择，无最大最小值 <span class="c999">(YYYY-MM-DD 范围)</span></div>
    <div class="c-datepicker-date-editor  J-datepicker-range-day mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年月日范围选择，无最大最小值 <span class="c999">(YYYY-MM-DD 范围)</span></div>
    <div class="c-datepicker-date-editor J-datepicker-range-day mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年月日时分秒单个选择，最小值：2018-01-01 04:00:00 ，最大值：2019-04-29 20:59:59 <span class="c999">(YYYY-MM-DD HH:mm:ss 单个)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input">
    </div>
  </div>
  <div class="mt40">
    <div>年月日时分秒范围选择，最小值：2018-01-01 06:00:00 ，最大值：2019-04-29 20:59:59 <span class="c999">(YYYY-MM-DD HH:mm:ss 范围)</span></div>
    <div>打开控制台，观察关闭的hide类型</div>
    <div class="c-datepicker-date-editor J-datepicker-range mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="2018-01-01 04:00:00">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="2018-03-01 04:00:00">
    </div>
  </div>

  <div class="mt40">
    <div>年月日时分秒范围选择，开始结束限制在一个自然月内 <span class="c999">(YYYY-MM-DD HH:mm:ss 范围)</span></div>
    <div class="c-datepicker-date-editor J-datepicker-range-betweenMonth mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年月日时分秒范围选择，开始结束限制在30天内 <span class="c999">(YYYY-MM-DD HH:mm:ss 范围)</span></div>
    <div class="c-datepicker-date-editor J-datepicker-range-between30 mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年月日十分单个选择 <span class="c999">(YYYY-MM-DD HH:mm 单个)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepickerTime-single mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年月日十分范围选择 <span class="c999">(YYYY-MM-DD HH:mm 范围)</span></div>
    <div class="c-datepicker-date-editor J-datepickerTime-range mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
      <span class="c-datepicker-range-separator">-</span>
      <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年月单个选择，最大值：2018-01，最小值：2019-04 <span class="c999">(YYYY-MM 单个)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-yearMonthPicker-single mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="选择年月" class=" c-datepicker-data-input" value="">
    </div>
  </div>

  <div class="mt40">
    <div>年单个选择，最大值：2020，最小值：2018 <span class="c999">(YYYY 单个)</span></div>
    <div class="c-datepicker-date-editor c-datepicker-single-editor J-yearPicker-single mt10">
      <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
      <input type="text" autocomplete="off" name="" placeholder="选择年份" class=" c-datepicker-data-input" value="">
    </div>
  </div>
  <div class="c-datepicker-box mt40" style="height:300px;overflow: auto; background: #dfeeff;padding: 20px;">
    父元素滚动，日期选择框跟随input滚动例子<br>
    父元素div.c-datepicker-box，样式：height:300px;overflow: auto; <br><br>
    占位 <br><br>
    占位 <br><br>
    <div class="mt40">
      <div>年月日单个选择，测试父元素滚动用</div>
      <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
        <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
      </div>
    </div>
    <div class="mt20">
      <div>年月日单个选择，测试父元素滚动用</div>
      <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
        <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
      </div>
    </div>
    占位 <br><br>
    占位 <br><br>
    占位 <br><br>
    占位 <br><br>
    占位 <br><br>
    占位 <br><br>
  </div>


</div>
<script src="js/jquery.js"></script>
<script src="js/plugins/moment.min.js"></script>
<script src="js/datepicker.all.js"></script>
<script src="js/datepicker.en.js"></script>
<script type="text/javascript">
  $(function(){
    //选择时分秒
    $('.J-datepicker-time').datePicker({
      format: 'HH:mm:ss',
      min: '04:23:11'
    });
    $('.J-datepicker-time-range').datePicker({
      format: 'HH:mm:ss',
      isRange: true,
      min: '04:23:11',
      max: '20:59:59'
    });
    //时分秒年月日单个
    $('.J-datepicker-en').datePicker({
      hasShortcut: true,
      min: '2018-01-01 04:00:00',
      max: '2019-04-29 20:59:59',
      language: 'en',
      shortcutOptions: [{
        name: 'today',
        day: '0'
      }, {
        name: 'yesterday',
        day: '-1',
        time: '00:00:00'
      }, {
        name: 'last week',
        day: '-7'
      }],
      hide: function () {
        console.info(this)
      }
    });
    var DATAPICKERAPI = {
      // 默认input显示当前月,自己获取后填充
      activeMonthRange: function () {
        return {
          begin: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
          end: moment().set({ 'hour': 23, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      shortcutMonth: function () {
        // 当月
        var nowDay = moment().get('date');
        var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
        var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
        return {
          now: '-' + nowDay + ',0',
          prev: '-' + prevMonthDay + ',-' + nowDay
        }
      },
      // 近n小时计算返回
      shortcutPrevHours: function (hour) {
        var nowDay = moment().get('date');
        var prevHours = moment().subtract(hour, 'hours');
        var prevDate=prevHours.get('date')- nowDay;
        var nowTime=moment().format('HH:mm:ss');
        var prevTime = prevHours.format('HH:mm:ss');
        return {
          day: prevDate + ',0',
          time: prevTime+',' + nowTime,
          name: '近'+ hour+'小时'
        }
      },
      // 注意为函数：快捷选项option:只能同一个月份内的
      rangeMonthShortcutOption1: function () {
        var result = DATAPICKERAPI.shortcutMonth();
        // 近18小时
        var resultTime= DATAPICKERAPI.shortcutPrevHours(18);
        return [{
          name: '昨天',
          day: '-1,-1',
          time: '00:00:00,23:59:59'
        }, {
          name: '这一月',
          day: result.now,
          time: '00:00:00,'
        }, {
          name: '上一月',
          day: result.prev,
          time: '00:00:00,23:59:59'
        }, {
          name: resultTime.name,
          day: resultTime.day,
          time: resultTime.time
        }];
      },
      // 快捷选项option
      rangeShortcutOption1: [{
        name: '最近一周',
        day: '-7,0'
      }, {
        name: '最近一个月',
        day: '-30,0'
      }, {
        name: '最近三个月',
        day: '-90, 0'
      }],
      singleShortcutOptions1: [{
        name: '今天',
        day: '0',
        time: '00:00:00'
      }, {
        name: '昨天',
        day: '-1',
        time: '00:00:00'
      }, {
        name: '一周前',
        day: '-7'
      }]
    };
    //时分秒年月日单个
    $('.J-datepicker').datePicker({
      hasShortcut:true,
      min:'2018-01-01 04:00:00',
      max:'2019-04-29 20:59:59',
      shortcutOptions:[{
        name: '今天',
        day: '0'
      }, {
        name: '昨天',
        day: '-1',
        time: '00:00:00'
      }, {
        name: '一周前',
        day: '-7'
      }],
      hide:function(){
        console.info(this)
      }
    });

    //年月日单个
    $('.J-datepicker-day').datePicker({
      hasShortcut: true,
      format:'YYYY-MM-DD',
      shortcutOptions: [{
        name: '今天',
        day: '0'
      }, {
        name: '昨天',
        day: '-1'
      }, {
        name: '一周前',
        day: '-7'
      }]
    });

    //年月日范围
    $('.J-datepicker-range-day').datePicker({
      hasShortcut: true,
      format: 'YYYY-MM-DD',
      isRange: true,
      shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
    });

    //十分年月日单个
    $('.J-datepickerTime-single').datePicker({
      format: 'YYYY-MM-DD HH:mm'
    });

    //十分年月日范围
    $('.J-datepickerTime-range').datePicker({
      format: 'YYYY-MM-DD HH:mm',
      isRange: true
    });

    //时分秒年月日范围，包含最大最小值
    $('.J-datepicker-range').datePicker({
      hasShortcut: true,
      min: '2018-01-01 06:00:00',
      max: '2019-04-29 20:59:59',
      isRange: true,
      shortcutOptions: [{
        name: '昨天',
        day: '-1,-1',
        time: '00:00:00,23:59:59'
      },{
        name: '最近一周',
        day: '-7,0',
        time:'00:00:00,'
      }, {
        name: '最近一个月',
        day: '-30,0',
        time: '00:00:00,'
      }, {
        name: '最近三个月',
        day: '-90, 0',
        time: '00:00:00,'
      }],
      hide: function (type) {
        console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
        console.info('类型：',type)
      }
    });
    //时分秒年月日范围，限制只能选择同一月，比如2018-10-01到2018-10-30
    $('.J-datepicker-range-betweenMonth').datePicker({
      isRange: true,
      between:'month',
      hasShortcut: true,
      shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1()
    });

    //时分秒年月日范围，限制开始结束相隔天数小于30天
    $('.J-datepicker-range-between30').datePicker({
      isRange: true,
      between: 30
    });

    //年月单个
    $('.J-yearMonthPicker-single').datePicker({
      format: 'YYYY-MM',
      min: '2018-01',
      max: '2019-04',
      hide: function (type) {
        console.info(this.$input.eq(0).val());
      }
    });

    //选择年
    $('.J-yearPicker-single').datePicker({
      format: 'YYYY',
      min: '2018',
      max: '2020'
    });


  });
</script>
</body>
</html>
